<template>
  <div class="container">
        <el-header>
          <div class="title-container">
            <h3>场所信息编辑</h3>
          </div>
          <div class="add-container">
            <el-button class="iconfont iconicon_add" type="primary" size="small" @click.prevent="dialogVisible = true">添加场所</el-button>
          </div>
        </el-header>
        <el-form :inline="true" :model="form" label-width="120px" ref="form">
          <el-form-item label="科目选择:" prop="subject">
            <el-select v-model="form.subject">
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select></el-form-item>

          <el-form-item label="场所添加时间:" prop="query_time">
            <el-date-picker
              v-model="form.query_time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" :loading="buttonLoading" @click.prevent="query">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" class="iconfont iconicon_refresh" @click="reset('form')">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
        v-loading="loading"
        :data="tableData"
        border
        ref="table"
        :default-sort = "{prop: 'create_time', order: 'descending'}"
        >
        <el-table-column
          prop="name"
          label="场所名称"
        >
        </el-table-column>
        <el-table-column
          prop="school_name"
          label="分校名称"
        >
        </el-table-column>
        <el-table-column
          prop="subject"
          label="练车科目"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="添加时间"
          sortable
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
              <el-button class="iconfont iconicon_delete" @click.prevent="del(scope.$index)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
        <el-dialog title="添加分校练车场地" :visible.sync="dialogVisible">
          <el-form ref="dialog" :model="dialog" :rules="rule" label-position="right" label-width="120px">
              <el-form-item label="科目类型:" prop="subject">
                  <el-select v-model="dialog.subject">
                    <el-option
                    v-for="item in subject_place"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="练车场地地址:" prop="address">
                <el-input v-model="dialog.address"></el-input>
              </el-form-item>
            <el-form-item>
              <el-button type="primary" class="iconfont iconicon_add" @click="addPlace">添加</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
  </div>
</template>

<script>
  import {getSchoolPlace, delPlace, addSchoolPlace} from '@/api/school'
    export default {
        name: "placeManage",
        inject: ['reload'],
        data () {
            return {
                school_id: 0,
                form: {
                    subject: 0,
                    query_time: ''
                },
                subjects: [
                    {label: '全部', value: 0},
                    {label: '科目二', value: 1},
                    {label: '科目三', value: 2}
                ],
                subject_place: [
                    {label: '请选择', value: ''},
                    {label: '科目二', value: 1},
                    {label: '科目三', value: 2}
                ],
                buttonLoading: false,
                loading: true,
                tableData: [],
                dialogVisible: false,
                rule: {
                    subject: [
                        {required: true, message: '科目类型为必填项'},
                        {type: 'number', message: '科目类型为数字', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '场所地址为必填项', trigger: 'blur'},
                        {min:5, max: 50, message: '练车地址字符长度在5到50个字符之间', trigger: 'change'}
                    ]
                },
                dialog: {
                    subject: '',
                    address: ''
                }
            };
        },
        methods: {
            //查询条件查询
            query() {
              //组装查询参数
              var params = {
                  school_id: this.school_id,
                  subject: this.form.subject
              };


              this.buttonLoading = true;
              this.loading = true;
              if (this.isArray(this.form.query_time)) {
                  params.query_time = this.form.query_time[0] + ' - ' + this.form.query_time[1];
                  getSchoolPlace(params).then(response => {
                      this.buttonLoading = false;
                      this.loading = false;
                      this.tableData = response.data;
                  }).catch(err => {
                      this.buttonLoading = false;
                      this.loading = false;
                  })
              } else if (this.form.query_time == ''){
                  params.query_time = '';
                  getSchoolPlace(params).then(response => {
                      this.buttonLoading = false;
                      this.loading = false;
                      this.tableData = response.data;
                  }).catch(err => {
                      this.buttonLoading = false;
                      this.loading = false;
                  })
              } else {
                  this.$notify.warning('查询时间范围不完整');
                  this.buttonLoading = false;
                  this.loading = false;
                  return false;
              }


            },
            del (index) {
                var place_id = this.$refs.table.tableData[index].id;
                //这里设置了默认排序 导致获取错误的id 这里需要用ref 来获取排序后的tableData
                var data = {
                    school_id: this.school_id,
                    place_id: place_id
                };
                this.$confirm('此操作会永久删除场所信息,是否继续?','警告',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    delPlace(data).then(response => {
                        this.$message.success(response.msg);
                        this.reload();
                    }).catch(err => {

                    })
                });

            },
            reset(form) {
                this.$refs[form].resetFields();
                this.form.query_time = '';
            },
            isArray (obj) {
                if (typeof obj == 'object' && obj.constructor == Array ) {
                    return true;
                }
                return false;
            },
            addPlace() {
              this.$refs.dialog.validate(valid => {
                  if (!valid) {
                      return false;
                  }
                  var data = {
                      school_id: this.school_id,
                      subject: this.dialog.subject,
                      address: this.dialog.address
                  };
                  addSchoolPlace(data).then(response => {
                    this.$message.success(response.msg);
                    this.dialogVisible = false;
                    this.reload();
                  }).catch( err => {
                      this.dialogVisible = false;
                  })
              });
            }
        },
        mounted() {
            this.school_id = this.$route.query.school_id;
            getSchoolPlace({school_id: this.school_id,subject: this.subject, query_time: ''}).then(response => {
                this.loading = false;
                this.tableData = response.data;
            }).catch(error => {

            })
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    min-width: 100%;
    width: 100%;
    overflow: hidden;
    .el-header {
      position: relative;
      width: 90%;
      max-width: 100%;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
      .title-container {
        width: 50%;
        max-width: 50%;
        position: relative;
        text-align: right;
        float: left;
        h3 {
          font-size: 20px;
          height: 20px;
          line-height: 20px;
        }
      }
      .add-container{
        width: 50%;
        max-width: 50%;
        position: relative;
        float: right;
        height: 60px;
        marin-top: 20px;
        text-align: right;
        .el-button {
          margin-top:10px ;
        }
      }
    }
    .el-form{
      position: relative;
      width: 90%;
      max-width: 100%;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 0px auto;
      .el-form-item{
        margin-top:10px;
      }
    }
    .el-table {
      position: relative;
      width: 90%;
      max-width: 100%;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 0px auto;
    }

    .el-dialog {
      .el-form {
        position: relative;
        width: 90%;
        max-width: 100%;
        border: 1px solid #F2F6FC;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        margin: 0px auto;
        .el-input {
          width: 70%;
        }
      }
    }
  }
</style>
